<template>
    <!--pages/inquirySingle/inquirySingle.wxml-->
    <div :class="{'overflow':overflow}">
        <div class='base-info-wrap column' >
            <img class='info-bg' src='../assets/header-bg.png' ></img>
            <div class='base-info column wrap'>
                <div class='title column'>
                    <span>基本信息</span>
                    <span class='tips'>(本次就诊病人信息)</span>
                </div>
                <div class='form column'>
                    <div class='form-item flex'>
                        <span class='label'>姓名</span>
                        <input type="text" class='msg border' v-model='name' :maxlength='5' @input="nameInput($event)"/>
                    </div>
                    <div class='form-item flex'>
                        <div class='form-item-item flex' @click="openSexPicker">
                            <span class='label'>性别</span>
                            <div class='input-wrap border label flex'>
                                <span class="input">{{sex}}</span>
                                <span class='arrow-down'></span>
                            </div>
                        </div>
                        <div class='form-item-item flex'>
                            <span class='label'>身高</span>
                            <div class='input-wrap border flex'>
                                <input type="number" v-model='height' :maxlength='3' class="input" @input="heightInput($event)"/>
                                <span class='unit'>CM</span>
                            </div>
                        </div>
                    </div>
                    <div class='form-item flex'>
                        <div class='form-item-item flex'>
                            <span class='label'>年龄</span>
                            <div class='input-wrap border label flex'>
                                <input type="number" v-model='age' :maxlength='3' class="input age" @input="ageInput($event)"/>
                            </div>
                        </div>
                        <div class='form-item-item flex'>
                            <span class='label'>体重</span>
                            <div class='input-wrap border flex'>
                                <input type="number"  v-model='weight' maxlength='4' class="input" @input="weightInput($event)"/>
                                <span class='unit'>KG</span>
                            </div>
                        </div>
                    </div>
                    <div class='form-item'>
                        <div class='form-item-item flex' @click="openBrithPicker">
                            <span class='label'>生日</span>
                            <div class='input-wrap border region flex'>
                                <span class="input">{{brith}}</span>
                                <span class='arrow-down'></span>
                            </div>
                        </div>
                    </div>
                    <div class='form-item'>
                        <div class='form-item-item flex' @click="openRegionPicker">
                            <span class='label'>地区</span>
                            <div class='input-wrap border region flex'>
                                <span class="input">{{region}}</span>
                                <span class='arrow-down'></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='wrap column'>
            <div class='title noborder'>
                <span>病情描述</span>
            </div>
            <textarea placeholder='请输入身体不舒服或者异样的情况' class='textarea' v-model='illintro' @input="illintroInput($event)"></textarea>
            <div class='upImg-wrap column'>
                <div class='sub-title'>舌面照</div>
                <div class='img-wrap column'>
                    <div class='img-item flex'>
                        <div class='example-wrap'>
                            <img src='../assets/tongue-up.png'  class='example-img'></img>
                        </div>
                        <div class="add-wrap">
                            <img :src='tongueUpImg' class='add-img'></img>
                            <input type="file" class="input-file" @change="upImgTap($event,'tongue-up')"  accept="image/*"/>
                        </div>
                    </div>
                    <div class='img-item flex'>
                        <div class='example-wrap flex'>
                            <img src='../assets/tongue-down.png'  class='example-img'></img>
                        </div>
                        <div class="add-wrap">
                            <img :src='tongueDownImg' class='add-img'></img>
                            <input type="file" class="input-file" @change="upImgTap($event,'tongue-down')"  accept="image/*"/>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class='upImg-wrap column'>
                <div class='sub-title'>面部照</div>
                <div class='img-wrap column'>
                    <div class='img-item flex'>
                        <div class='example-wrap flex'>
                            <img src='../assets/face-up.png'  class='example-img'></img>
                        </div>
                        <div class="add-wrap">
                            <img :src='faceUpImg' class='add-img'></img>
                            <input type="file" class="input-file" @change="upImgTap($event,'face-up')"  accept="image/*"/>
                        </div>
                    </div>
                    <div class='img-item flex'>
                        <div class='example-wrap'>
                            <img src='../assets/face-down.png'  class='example-img'></img>
                        </div>
                        <div class="add-wrap">
                            <img :src='faceDownImg' class='add-img'></img>
                            <input type="file" class="input-file" @change="upImgTap($event,'face-down')"  accept="image/*"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class='upImg-wrap column'>
                <div class='sub-title'>以往病例</div>
                <div class='img-wrap column'>
                    <div class='img-item flex case-item'>
                        <img src='../assets/caseImg.png' class='example-img'></img>
                        <div class='example-wrap flex' v-for="(item,index) in caseImg">
                            <img :src='item'  class='example-img'></img>
                            <img src='../assets/reset.png' @click='delImg(index)' class='del-img'></img>
                        </div>
                        <div class="add-wrap">
                            <img src='../assets/add1.png' class='add-img'></img>
                            <input type="file" class="input-file" @change="upImgTap($event,'caseImg')" accept="image/*"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='answer-btn flex' @click='questionTap'>下一步，回答医生几个问题</div>
        <mt-datetime-picker
            ref="brithPicker"
            type="date"
            :startDate="startDate"
            :endDate="today"
            @confirm="birthChange" v-if="startDate">
        </mt-datetime-picker>
        <div class="layer" v-if="layer">
            <div class="sexPicker-wrap" :class="{'showSex':sexPicker}">
                <div class="sexPicker">
                    <mt-picker :slots="sexList" @change="onSexChange"></mt-picker>
                    <button class="btn cancle" @click="cancleTap">取消</button>
                    <button class="btn true" @click="trueTap">确定</button>
                </div>
            </div>
            <div class="sexPicker-wrap" :class="{'showSex':regionPicker}">
                <div class="regionPicker">
                    <div class="flex btn-wrap">
                        <button class="btn cancle" @click="cancleTap">取消</button>
                        <button class="btn true" @click="trueTap">确定</button>
                    </div>
                    <mt-picker :slots="regionSlots" @change="onRegionChange" value-key="name"></mt-picker>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import tongueUpImg from "../assets/add1.png";
import tongueDownImg from "../assets/add1.png";
import faceUpImg from "../assets/add1.png";
import faceDownImg from "../assets/add1.png";
import utils from "../base/js/util.js";
import regionList from "../base/js/region.js";
import { DatetimePicker, Toast, Picker, Indicator } from "mint-ui";
import { editregistration } from "./../api/index";
import { upLoadUrl } from "./../config/index";
import axios from "axios";
export default {
  data() {
    return {
      flag: true,
      overflow:false,
      registrationid: "", //挂号id
      doctorid: "", //医生id
      uid: "", //患者id
      name: "", //患者姓名
      startDate: "", //开始日期
      sexList: [
        {
          flex: 1,
          values: ["男", "女"],
          textAlign: "center"
        }
      ],
      sex: "", //患者性别
      height: "", //患者身高
      age: "", //年龄
      brith: "", //出生年月
      weight: "", //体重
      regionSlots: [
        {
          flex: 1,
          values: [],
          textAlign: "left"
        },
        {
          flex: 1,
          values: [],
          textAlign: "center"
        },
        {
          flex: 1,
          values: [],
          textAlign: "right"
        }
      ],
      region: "", //省市区
      illintro: "", //病情描述
      tongueUpImg,
      tongueDownImg, //舌头照
      faceUpImg,
      faceDownImg, //面部照
      caseImg: [], //以往病例
      tongueUpImg1:'',
      tongueDownImg1:'', //舌头照
      faceUpImg1:'',
      faceDownImg1:'', //面部照
      caseImg1: [], //以往病例
      illfocus: false,
      namefocus: false,
      heightfocus: false,
      weightfocus: false,
      today: "", //今天的日期
      sexPicker: false,
      regionPicker: false,
      layer: false,
      outTime: 1500
    };
  },
  mounted() {
    this.startDate = new Date(1900, 1, 1);
    this.today = new Date();
    if (this.$route.params.registrationid) {
      this.registrationid = this.$route.params.registrationid;
      sessionStorage.setItem(
        "registrationid",
        this.$route.params.registrationid
      );
    } else {
      this.registrationid = sessionStorage.getItem("registrationid");
    }

    if (this.$route.params.doctorid) {
      this.doctorid = this.$route.params.doctorid;
      sessionStorage.setItem("inquiryDoctorid", this.$route.params.doctorid);
    } else {
      this.doctorid = sessionStorage.getItem("inquiryDoctorid");
    }

    if (this.$route.params.uid) {
      this.uid = this.$route.params.uid;
      sessionStorage.setItem("inquiryUid", this.$route.params.uid);
    } else {
      this.uid = sessionStorage.getItem("inquiryUid");
    }
    this.regionSlots = [
      {
        flex: 1,
        values: regionList
      },
      {
        flex: 1,
        values: regionList[0].city
      },
      {
        flex: 1,
        values: regionList[0].city[0].area
      }
    ];

    if (localStorage.getItem("myName")) {
      this.name = localStorage.getItem("myName");
    }
    if (localStorage.getItem("mySex")) {
      this.sex = localStorage.getItem("mySex");
    }
    if (localStorage.getItem("myHeight")) {
      this.height = localStorage.getItem("myHeight");
    }
    if (localStorage.getItem("myWeight")) {
      this.weight = localStorage.getItem("myWeight");
    }
    if (localStorage.getItem("myBrith")) {
      this.brith = localStorage.getItem("myBrith");
    }
    if (localStorage.getItem("myAge")) {
      this.age = localStorage.getItem("myAge");
    }
    if (localStorage.getItem("myIllintro")) {
      this.illintro = localStorage.getItem("myIllintro");
    }
    if (localStorage.getItem("myRegion")) {
      this.region = localStorage.getItem("myRegion");
    }
    if (localStorage.getItem("tongueUpImg")) {
      this.tongueUpImg = localStorage.getItem("tongueUpImg");
    }
    if (localStorage.getItem("tongueDownImg")) {
      this.tongueDownImg = localStorage.getItem("tongueDownImg");
    }
    if (localStorage.getItem("faceUpImg")) {
      this.faceUpImg = localStorage.getItem("faceUpImg");
    }
    if (localStorage.getItem("faceDownImg")) {
      this.faceDownImg = localStorage.getItem("faceDownImg");
    }
    if (localStorage.getItem("caseImg")) {
      this.caseImg = JSON.parse(localStorage.getItem("caseImg"));
    }

    if (localStorage.getItem("tongueUpImg1")) {
      this.tongueUpImg1 = localStorage.getItem("tongueUpImg1");
    }
    if (localStorage.getItem("tongueDownImg1")) {
      this.tongueDownImg1 = localStorage.getItem("tongueDownImg1");
    }
    if (localStorage.getItem("faceUpImg1")) {
      this.faceUpImg1 = localStorage.getItem("faceUpImg1");
    }
    if (localStorage.getItem("faceDownImg1")) {
      this.faceDownImg1 = localStorage.getItem("faceDownImg1");
    }
    if (localStorage.getItem("caseImg1")) {
      this.caseImg1 = JSON.parse(localStorage.getItem("caseImg1"));
    }
  },
  methods: {
    //打开生日picker
    openBrithPicker() {
      this.$refs.brithPicker.open();
      this.overflow = true
      this.layer = false
    },
    //打开性别picker
    openSexPicker() {
      this.sexPicker = !this.sexPicker;
      this.layer = true;
      this.overflow = true
    },
    //打开省市区picker
    openRegionPicker() {
      this.regionPicker = !this.regionPicker;
      this.layer = true;
      this.overflow = true
    },
    //性别（取消）
    cancleTap() {
      this.sexPicker = false;
      this.regionPicker = false;
      this.layer = false;
      this.overflow = false
    },
    //性别（确定）
    trueTap() {
      this.sexPicker = false;
      this.regionPicker = false;
      this.layer = false;
      this.overflow = false
    },
    //输入姓名
    nameInput(e) {
      localStorage.setItem("myName", e.target.value);
    },
    //输入身高
    heightInput(e) {
      localStorage.setItem("myHeight", e.target.value);
    },
    //输入体重
    weightInput(e) {
      localStorage.setItem("myWeight", e.target.value);
    },
    //输入病症
    illintroInput(e) {
      this.overflow = false
      localStorage.setItem("myIllintro", e.target.value);
    },
    //提交基本信息
    questionTap() {
      let mstr = sessionStorage.getItem("mstr");
      if (!this.name.replace(/(^\s*)|(\s*$)/g, "")) {
        Toast({
          message: "请输入姓名",
          position: "center",
          duration: 2000
        });
        return false;
      }
      if (!this.sex) {
        Toast({
          message: "请选择性别",
          position: "center",
          duration: 2000
        });
        return false;
      }
      if (!this.height) {
        Toast({
          message: "请输入身高",
          position: "center",
          duration: 2000
        });
        return false;
      }
      if (!this.age) {
        Toast({
          message: "请选择年龄",
          position: "center",
          duration: 2000
        });
        return false;
      }
      if (!this.weight) {
        Toast({
          message: "请输入体重",
          position: "center",
          duration: 2000
        });
        return false;
      }
      if (!this.region) {
        Toast({
          message: "请选择地区",
          position: "center",
          duration: 2000
        });
        return false;
      }
      if (!this.illintro.replace(/(^\s*)|(\s*$)/g, "")) {
        Toast({
          message: "请输入病情描述",
          position: "center",
          duration: 2000
        });
        return false;
      }
      if (
        this.tongueUpImg == tongueUpImg ||
        this.tongueDownImg == tongueDownImg
      ) {
        Toast({
          message: "请上传舌面照",
          position: "center",
          duration: 2000
        });
        return false;
      }
      if (this.faceUpImg == faceUpImg || this.faceDownImg == faceDownImg) {
        Toast({
          message: "请上传面部照    ",
          position: "center",
          duration: 2000
        });
        return false;
      }
      if (!this.caseImg.length) {
        Toast({
          message: "请上传以往病例    ",
          position: "center",
          duration: 2000
        });
        return false;
      }
      let options = {
        mstr: mstr,
        registrationid: this.registrationid,
        name: this.name,
        sex: this.sex,
        stature: this.height,
        age: this.age,
        birthday: this.brith,
        weight: this.weight,
        area: this.region,
        disease: this.illintro,
        tongueimg1: this.tongueUpImg1,
        tongueimg2: this.tongueDownImg1,
        faceimg1: this.faceUpImg1,
        faceimg2: this.faceDownImg1,
        anamnesis: this.caseImg1
      };
      if (this.flag) {
        this.flag = false;
        editregistration(options).then(res => {
          if (res.data.status === 1) {
            localStorage.removeItem("myIllintro");
            localStorage.removeItem("tongueUpImg");
            localStorage.removeItem("tongueDownImg");
            localStorage.removeItem("faceUpImg");
            localStorage.removeItem("faceDownImg");
            localStorage.removeItem("caseImg");
            localStorage.removeItem("tongueUpImg1");
            localStorage.removeItem("tongueDownImg1");
            localStorage.removeItem("faceUpImg1");
            localStorage.removeItem("faceDownImg1");
            localStorage.removeItem("caseImg1");
            this.$router.replace({
              name: "question",
              params: {
                registrationid: this.registrationid,
                doctorid: this.doctorid,
                uid: this.uid
              }
            });
          } else {
            Toast({
              message: res.data.info,
              position: "center",
              duration: 2000
            });
          }
          setTimeout(() => {
            this.flag = true;
          }, this.outTime);
        });
      }
    },
    //选择出生日期
    birthChange(value) {
      let year = new Date().getFullYear();
      let birthYear = utils.formatTime1(value).split("-")[0];
      this.brith = utils.formatTime1(value);
      this.age = year - birthYear * 1;
      this.overflow = false
      localStorage.setItem("myBrith", this.brith);
      localStorage.setItem("myAge", this.age);
    },
    //输入年龄
    ageInput(e) {
      let year = utils.formatTime1(new Date()).split("-")[0];
      let brithYear = year - e.target.value;
      let arr = utils.formatTime1(new Date()).split("-");
      arr.splice(0, 1, brithYear);
      this.brith = arr.join("-");
      localStorage.setItem("myAge", e.target.value);
      localStorage.setItem("myBrith", this.brith);
    },
    //选择性别
    onSexChange(value) {
      this.sex = value.values[0];
      localStorage.setItem("mySex", this.sex);
    },
    //选择省市区
    onRegionChange(picker, values) {
      if (values[0]) {
        picker.setSlotValues(1, values[0].city);
        let town = [];
        if (values[1]) {
          town = values[1].area;
        }
        picker.setSlotValues(2, town);
      }
      this.region = `${picker.getValues()[0].name}${
        picker.getValues()[1].name
      }${picker.getValues()[2]}`;
      localStorage.setItem("myRegion", this.region);
    },
    delImg(index){
        this.caseImg.splice(index,1)
        this.caseImg1.splice(index,1)
        localStorage.setItem("caseImg", JSON.stringify(this.caseImg));
        localStorage.setItem("caseImg1", JSON.stringify(this.caseImg1));
    },
    //上传图片
    upImgTap(e, status) {
      if (!e.target.files[0]) {
        return false;
      }
      Indicator.open("上传中");
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      let size = file.size;
      // if(size>3145728){
      //     Indicator.close()
      //     Toast({
      //         message:'请选择3M以内的图片！',
      //         position:'center',
      //         duration:2000
      //     });
      //     return false;
      // }
      param.append("image", file, file.name); //);//通过append向form对象添加数据
      axios
        .post(upLoadUrl, param)
        .then(res => {
          if (res.data.status === 1) {
            switch (status) {
              case "tongue-up":
                this.tongueUpImg = res.data.data.url;
                this.tongueUpImg1 = res.data.data.path;
                localStorage.setItem("tongueUpImg", this.tongueUpImg);
                localStorage.setItem("tongueUpImg1", this.tongueUpImg1);
                break;
              case "tongue-down":
                this.tongueDownImg = res.data.data.url;
                this.tongueDownImg1 = res.data.data.path;
                localStorage.setItem("tongueDownImg", this.tongueDownImg);
                localStorage.setItem("tongueDownImg1", this.tongueDownImg1);
                break;
              case "face-up":
                this.faceUpImg = res.data.data.url;
                this.faceUpImg1 = res.data.data.path;
                localStorage.setItem("faceUpImg", this.faceUpImg);
                localStorage.setItem("faceUpImg1", this.faceUpImg1);
                break;
              case "face-down":
                this.faceDownImg = res.data.data.url;
                this.faceDownImg1 = res.data.data.path;
                localStorage.setItem("faceDownImg", this.faceDownImg);
                localStorage.setItem("faceDownImg1", this.faceDownImg1);
                break;
              case "caseImg":
                this.caseImg.push(res.data.data.url);
                this.caseImg1.push(res.data.data.path);
                localStorage.setItem("caseImg", JSON.stringify(this.caseImg));
                localStorage.setItem("caseImg1", JSON.stringify(this.caseImg1));
              default:
            }
          }
          Indicator.close();
        })
        .catch(err => {
          Indicator.close();
          Toast({
            message: "上传图片出错！",
            position: "center",
            duration: 2000
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../base/css/_base.scss";
/* pages/inquirySingle/inquirySingle.wxss */

.wrap {
  background: #fff;
  border-radius: torem(10px);
  margin: 0 torem(30px) torem(30px);
  padding: 0 torem(16px);
  box-shadow: 0 torem(5px) torem(9px) 1px rgba(232, 203, 163, 0.46);
}
.overflow{
  overflow: hidden;
  height: 100vh;
}
.border {
  border: solid 1px #bf8440;
  border-radius: torem(6px);
}

/* 医生信息 */

.base-info-wrap {
  position: relative;
}

.base-info-wrap .info-bg {
  width: 100%;
  height: torem(200px);
}

.base-info-wrap .base-info {
  margin-top: torem(-100px);
}

.wrap .title {
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: torem(32px);
  padding: torem(30px) 0;
  border-bottom: 1px solid #f0d7b9;
}

.wrap .title.noborder {
  border-bottom: 0;
}

.wrap .title .tips {
  color: #666;
  font-size: torem(24px);
  margin-top: torem(10px);
}

.form {
  font-size: torem(28px);
  color: #333;
  padding: torem(50px) torem(18px) 0 torem(18px);
}

.form .form-item {
  margin-bottom: torem(30px);
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.form .form-item > input {
  font-size: torem(28px);
  color: #333;
}

.form-item .msg {
  border-radius: torem(6px);
  flex: 1;
  height: torem(70px);
  margin-left: torem(18px);
  padding-left: torem(20px);
}

.form-item .form-item-item {
  align-items: center;
}

.form-item-item .input-wrap {
  align-items: center;
  padding: torem(10px) torem(18px) torem(10px) 0;
  width: torem(220px);
  height: torem(70px);
}

.form-item-item .input-wrap.region {
  flex: 1;
}

.form-item-item .label {
  margin-right: torem(18px);
}

.form-item-item .input-wrap .arrow-down {
  width: torem(19px);
  height: torem(17px);
  border-left: torem(2px) solid #bf8440;
  border-bottom: torem(2px) solid #bf8440;
  transform: rotate(-45deg);
}

.form-item-item .input-wrap .input {
  border-right: 1px solid #ebe7e1;
  margin-right: torem(20px);
  padding-left: torem(20px);
  height: 100%;
  flex: 1;
  width: 100%;
  background: #fff;
  font-size: torem(28px);
  color: #333;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.form-item-item .input-wrap .input.age {
  width: torem(90px);
  overflow: hidden;
  border-right: 0;
}

.wrap .textarea {
  width: 95%;
  height: torem(180px);
  background-color: #f7f7f7;
  border-radius: torem(8px);
  border: solid 1px #bf8440;
  font-size: torem(28px);
  color: #333;
  padding: torem(20px);
  margin: 0 auto;
}

.upImg-wrap {
  align-items: center;
  margin-bottom: torem(45px);
}

.upImg-wrap .sub-title {
  padding: torem(30px) 0;
  color: #333;
  font-size: torem(32px);
}

.upImg-wrap .img-wrap {
  justify-content: space-around;
  width: 100%;
  padding: 0 torem(50px);
}

.upImg-wrap .img-wrap .img-item {
  justify-content: space-around;
  flex-wrap: wrap;
}
.upImg-wrap .img-wrap .img-item.case-item {
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 torem(50px);
}
.upImg-wrap .img-wrap .img-item:nth-child(1) {
  margin-bottom: torem(40px);
}

.img-item .example-wrap {
  position: relative;
  width: torem(190px);
  height: torem(200px);
  margin-bottom:torem(30px);
}

.img-item .example-img {
  width: torem(190px);
  height: torem(200px);
}
.img-item .example-wrap .del-img {
  width: torem(32px);
  height: torem(32px);
  position: absolute;
  right: torem(-16px);
  top: torem(-16px);
}
.add-wrap {
  position: relative;
}
.add-wrap .input-file {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.img-item .add-img {
  width: torem(190px);
  height: torem(200px);
}

.answer-btn {
  width: 100%;
  max-width: 750px;
  height: torem(80px);
  background-color: #db5034;
  color: #fff;
  font-size: torem(30px);
  align-items: center;
  justify-content: center;
  margin-top: torem(30px);
}

.sexPicker-wrap {
  position: fixed;
  left: 0;
  bottom: -100%;
  width: 100%;
  transition: all 0.5s;
  background: #fff;
}
.sexPicker-wrap.showSex {
  bottom: 0;
}

.sexPicker-wrap .sexPicker {
  position: relative;
}

.sexPicker-wrap .sexPicker .btn {
  position: absolute;
  top: torem(30px);
  color: #3aaaff;
  font-size: torem(32px);
}
.sexPicker-wrap .sexPicker .cancle {
  left: torem(150px);
}
.sexPicker-wrap .sexPicker .true {
  right: torem(150px);
}
.sexPicker-wrap .regionPicker {
  padding-top: torem(70px);
}
.sexPicker-wrap .regionPicker .btn-wrap {
  justify-content: space-between;
  position: absolute;
  top: torem(30px);
  width: 100%;
  padding: 0 torem(150px);
}
.regionPicker .btn-wrap .btn {
  color: #26a2ff;
  font-size: torem(32px);
}
</style>